import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import AddButton from './components/AddButton'
import RoleList from './components/RoleList'
import RoleDetail from './components/RoleDetail'
import type { RoleDto } from '@/api/system/types'
import { getRoleList } from '@/api/system'
import { Col, Row } from 'ant-design-vue'

@Component
export class RoleManagementView extends Render {
    roleList = [] as RoleDto[]

    curId = 0

    async initData() {
        const res = await getRoleList({
            pageNum: 1,
            pageSize: 999
        })
        this.roleList = res.rows
        this.curId = res.rows[0]?.roleId
    }

    onMounted() {
        this.initData()
    }

    render() {
        return (
            <div class="h-full flex flex-col overflow-hidden p-20px">
                <AddButton roleId={this.curId} onRefresh={this.initData} />
                <Row class="flex-1 overflow-hidden" gutter={20}>
                    <Col class="h-full overflow-hidden" md={6} sm={24}>
                        <RoleList v-model:roleId={this.curId} roleList={this.roleList} />
                    </Col>
                    <Col class="h-full overflow-hidden" md={18} sm={24}>
                        <RoleDetail roleId={this.curId} onRefresh={this.initData}/>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default toNative<{}, {}>(RoleManagementView)
